<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="天地图"/>
    <title>智慧茶园-Demo</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=81eb57cbe3f7343402766223e7b7abe8"></script>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.8.0/echarts.min.js"></script>
     <link rel="stylesheet" type="text/css" href="css/my.css">
    <style type="text/css">
    	body,html{
    		font-family:"Microsoft YaHei"
    	}
        input,b,p{
            margin-left:5px;
            font-size:14px
        }

        /* 地图容器样式设定*/
        #mapDiv{
    		width:100%;
            height:100%;
    	}

		/*种植日历信息窗口样式*/
		#calendarInfoBox{
            background-color:rgba(255, 255, 255, 0.9);
			color:black;
			overflow: hidden;
			z-index: 9999;
			position: fixed;
			padding:5px;
			text-align:center;
			width: 40%;
			height: 500px;
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			top:200px;
			right:5%;
            display:none
		}

        /*下方中央，种植管理按钮*/
        #plantationBox{
            top: 160px;
            left: 20px;
            height:40px;
            width: 200px;
            overflow: hidden;
            z-index: 9999;
            position: fixed;
            padding:5px;
            text-align:left
        }

        /*茶园下拉框*/
        #plantationSelect
        {
            height:35px;
            width:150px;
            padding-left:10px;
            background-color:rgba(255, 255, 255, 0.8);
            border-radius:2px;
            border:2px solid #4e6096;
        }

		/*上方box*/
        #topBox{
            height:150px;
            width: 100%;
            margin-left:5px;
            margin-top: 5px;
            overflow: hidden;
            z-index: 9999;
            position: fixed;
            text-align:left;
        }

        #topLeftBox{
            height:140px;
            width: 30%;
            background-color:rgba(255, 255, 255, 0.9);
            text-align:left;
            color: white;
            display: inline-block;
            border-radius:4px;
            border:2px solid #FFFFFF;
        }

        #topCenterBox{
            height:140px;
            width: 30%;
            background-color:rgba(255, 255, 255, 0.9);
            text-align:left;
            color: white;
            display: inline-block;
            border-radius:4px;
            border:2px solid #FFFFFF;
        }

        #topRightBox{
            height:140px;
            width: 36%;
            background-color:rgba(255, 255, 255, 0.9);
            text-align:left;
            color: white;
            display: inline-block;
            border-radius:4px;
            border:2px solid #FFFFFF;
        }


        /*下方按钮容器 */
		#bottomBox{
			bottom: 10px;
			height:30px;
            width: 100%;
            overflow: hidden;
            z-index: 9999;
            position: fixed;
            padding:5px;
            text-align:center
		}

        /* 底部按钮样式 */
		.bottomBtn {
			box-shadow: 0px 0px 0px 2px #fafbff;
			background:linear-gradient(to bottom, #7b9cd4 5%, #6291cc 100%);
			background-color:#7b9cd4;
			border-radius:2px;
			border:1px solid #4e6096;
			display:inline-block;
			cursor:pointer;
			color:#ffffff;
			font-size:12px;
			padding:5px 15px;
			text-decoration:none;
			text-shadow:0px 1px 0px #304069
		}
		.bottomBtn:hover {
			background:linear-gradient(to bottom, #6291cc 5%, #7b9cd4 100%);
			background-color:#6291cc
		}
		.bottomBtn:active {
			position:relative;
			top:1px
		}

        /* 信息窗体关闭按钮样式设定 - 开始 */
        a:link {
            color: black;
            text-decoration: none
        }
        a:visited {
            text-decoration: none
        }
        a:hover {
            text-decoration: none
        }
        a:active {
            text-decoration: none
        }
        /* 信息窗体关闭按钮样式设定 - 结束 */

    </style>
    <script>
        //地图变量
        var map;
        //缩放级别
        var zoom = 18;

        //声明地块1
        var section_1_basic;    //地块1基本信息覆盖物
        var section_1_calendar;    //地块1种植管理信息覆盖物

        //声明地块2
        var section_2_basic;    //地块基本信息覆盖物
        //var section_2_calendar;    //种植管理信息覆盖物

        //初始化加载函数
        function onLoad() {
            //初始化地图对象
            map = new T.Map("mapDiv");

            //设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(120.0805,30.20627), zoom);

            //创建缩放平移控件对象
            control = new T.Control.Zoom();
            //缩放控件位置固定在左下角
            control.setPosition(T_ANCHOR_BOTTOM_LEFT);
            //添加缩放平移控件
            map.addControl(control);

            //将底图设置为卫星与路网混合影像图
			map.setMapType(TMAP_HYBRID_MAP);

			//设置青雾茶园地块1的定位点
            var points_1 = [];
            points_1.push(new T.LngLat(120.079,30.20661));
            points_1.push(new T.LngLat(120.07922,30.20589));
            points_1.push(new T.LngLat(120.07989,30.2059));
            points_1.push(new T.LngLat(120.0796,30.20612));
            points_1.push(new T.LngLat(120.08024,30.20626));
            points_1.push(new T.LngLat(120.0797,30.20649));
            points_1.push(new T.LngLat(120.07943,30.20651));
            points_1.push(new T.LngLat(120.07939,30.20659));

            //初始化地块1基本信息的多边形面对象
            section_1_basic = new T.Polygon(points_1,{
                color: "white", weight: 3, opacity: 0.7, fillColor: "#FFFFFF", fillOpacity: 0.1
            });
            //给地块1基本信息图层增加点击事件
	        section_1_basic.addEventListener("click", Section1_Click);

            //地块1基本信息图层点击弹出窗函数
	        function Section1_Click() {
                //隐藏非基本地块信息覆盖层
                section_1_calendar.hide();

                //创建一个信息窗体
	            var infoWin1 = new T.InfoWindow();
	            var sContent =
	                "<div style='margin:0px;'>" +
	                "<div style='margin:10px 10px; '>" +
	                "<img style='float:right;margin:0px 10px' src='http://www.guoshu365.net/uploads/allimg/180202/0941021024-0.jpg' width='100' height='80' title='白叶1号'/>" +
	                "<div style='margin:10px 120px 10px 0px;'><h4>1号地块</h4> <br>该地块主要种植白叶1号，面积0.15亩，朝南，坡度25度。" +
	                "</div>" +
	                "</div>" +
	                "</div>";
	            infoWin1.setContent(sContent);
				section_1_basic.openInfoWindow(infoWin1);
	        }

	        //向地图上添加地块1基本信息图层
            map.addOverLay(section_1_basic);

            //初始化地块1种植管理信息的多边形面对象
            section_1_calendar = new T.Polygon(points_1,{
                color: "yellow", weight: 3, opacity: 0.7, fillColor: "#DFD83D", fillOpacity: 0.2
            });
            
            //向地图上添加地块1种植管理图层
            map.addOverLay(section_1_calendar);
            //默认隐藏
            section_1_calendar.hide();

            //设置晨露茶园地块2的定位点
            var points_2 = [];
            points_2.push(new T.LngLat(120.08922,30.1833));
            points_2.push(new T.LngLat(120.08962,30.18275));
            points_2.push(new T.LngLat(120.09037,30.18316));
            points_2.push(new T.LngLat(120.08984,30.1833));
            points_2.push(new T.LngLat(120.08961,30.18349));
            
            //初始化地块1基本信息的多边形面对象
            section_2_basic = new T.Polygon(points_2,{
                color: "white", weight: 3, opacity: 0.7, fillColor: "#FFFFFF", fillOpacity: 0.1
            });

            //向地图上添加晨露茶园地块2基本信息图层
            map.addOverLay(section_2_basic);

            // //创建右键菜单对象，用以获取右键位置经纬度坐标
            // var menu = new T.ContextMenu({width: 140});
            // //添加右键菜单

            // var txtMenuItem = [
            //     {
            //         text: '获得右键点击处坐标',
            //         isDisable: false,
            //         callback: function (lnglat) {
            //             alert(lnglat.getLng() + "," + lnglat.getLat());
            //         }
            //     }
            // ];

            // for (var i = 0; i < txtMenuItem.length; i++) {
            //     //添加菜单项
            //     var item = new T.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback);
            //     //item.disable();
            //     menu.addItem(item);
            //     if (i == 1 || i == 3) {
            //         //添加分割线
            //         menu.addSeparator();
            //     }
            // }
            // map.addContextMenu(menu);
            
        }

        //隐藏种植管理日历窗体
        function hideCalendarInfoBox(){            
            section_1_calendar.hide();//隐藏地块1种植管理覆盖层
            section_1_basic.show(); //显示基本地块覆盖层

            $("#calendarInfoBox").hide();   //隐藏种植管理窗口
        }

        //重新定位，
        function relocateMap(lng,lat){
            map.panTo(new T.LngLat(lng, lat), zoom); 
        }

        //切换茶园茶园
        function changePlantation(event) {
            var pltName = event.target.value;
            switch(pltName) {
              case 'plt_01':
                relocateMap(120.0805,30.20627);
                break;
              case 'plt_02':
                relocateMap(120.09084,30.1836);
                break;
            }
        }
    </script>
</head>
<body onLoad="onLoad()">
    <!-- 顶部预留信息看板容器 -->
    <div id="topBox">
        <div id="topLeftBox"></div>
        <div id="topCenterBox"></div>
        <div id="topRightBox"></div>
    </div>

    <!-- 地图容器 -->
    <div id="mapDiv" ></div>
    
    <!-- 茶园选择下拉菜单容器 -->
    <div id="plantationBox">
        <select id="plantationSelect" onchange="changePlantation(event);">
            <option value="plt_01">青雾茶园</option>
            <option value="plt_02">茶叶研究院</option>
        </select>
    </div>

    <!-- 底部按钮容器 -->
    <div id="bottomBox">
        <input id="btnCalendar" type="button" class="bottomBtn" value="种植管理" onclick="showCalendarInfoBox()" />
        <input id="btnTrend" type="button" class="bottomBtn" value="长势监测" onclick="showTrend()" />
        <input type="button" class="bottomBtn" value="采摘预测"/>
    </div>

    <!-- 种植管理信息窗口，默认隐藏，点击种植管理按钮后显示 -->
    <div id="calendarInfoBox">
        <div align="right" style="margin-right: 10px;"><a href=JavaScript:; onclick="hideCalendarInfoBox();">x</a></div>
        <h5>种植管理</h5>
        <div id="calendarEcharts" style="width:500px;height:400px;"></div>
    </div>
    

    <script type="text/javascript">
        //显示种植管理日历窗体
        function showCalendarInfoBox(){  
            //创建一个echarts日历对象
            var cal = echarts.init(document.getElementById('calendarEcharts'));
            var option = {
                visualMap: {
                    show: false,
                    min: 0,
                    max: 1000
                },
                calendar: {
                    range: '2020-04'
                },
                series: {
                    type: 'heatmap',
                    coordinateSystem: 'calendar',
                    data: [['2020-04-02', 900], ['2020-04-22', 877]]
                }
            }
            cal.setOption(option);
            
            section_1_basic.hide();     //隐藏地块1基本信息图层
            section_1_calendar.show();  //显示地块1种植管理图层
            
            $("#calendarInfoBox").show();   //显示种植管理窗体

        }

        //显示趋势覆盖物
        function showTrend(){  
            
        }
    </script>
</body>
</html>